<template>
  <div id="myNews">
    <div class="marks" v-show="showMarks" @click.stop='showMarks=false'>
      <div class="allTime" @click.stop='showMarks=true'>
        <div class="top">赠送优惠券</div>
        <input type="number" placeholder="请输入手机号">
        <a @click.stop="isRight">确认赠送</a>
        <div @click.stop='showMarks=false' style="position: absolute;
        right: 0px;
        bottom: 30px;
        width: 85px;
        height: 30px;"></div>
      </div>
    </div>
    <header>
      <i @click="goBack()"></i>
      <div>优惠券</div>
    </header>
    <div class="head">
      <div class='active' @click='getNewsList(0,sentPage,"click")'>
        <a class="abstract">
          <b>赠送优惠券</b>
        </a>
      </div>
      <div @click='getNewsList(1,sentPage,"click")'>
        <a class="newfresh">
          <b>我的优惠券</b>
        </a>
      </div>
    </div>
    <div class="swipe" style="background: transparent">
      <div class="allNews">
        <div class='box'>
          <Loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="false">
            <ul class="allNewsList">
              <div class='mc' v-if="list.length<1">
                <img src="../../image/no_collection@2x.png" width='110' alt="">
                <p>您还没有相关的消息</p>
              </div>
              <li v-for="(item,index) in list" :key="index" class="list">
                <div>
                  <div class="left">
                    <div class="price">￥399.00</div>
                    <div class="text" style="font-size: 11px;">洗牙套餐升级版</div>
                  </div>
                  <div class="right"  @click.stop='showMarks=true'>赠送</div>
                </div>
              </li>

            </ul>
          </Loadmore>
        </div>

      </div>
    </div>
    <div class="bottom">
      <div style="font-size: 12px;color: rgba(0, 0, 0, 0.7)">优惠券使用规则：</div>
      <div style="margin-left: 8px;">1.该优惠券只可赠送他人，输入手机号即可。</div>
      <div style="margin-left: 8px;">2.赠送的优惠券被使用，赠送人会得到佣金，只可转赠一次。</div>
    </div>
  </div>
</template>
<script>
  import {
    Loadmore
  } from 'mint-ui';
  // import allNews from '../../components/myNews/allNews.vue'
  // import systemNews from '../../components/myNews/systemNews.vue'
  export default {
    data() {
      return {
        list: [],
        userid: '',
        type: 'all', //全部消息 系统消息 all window
        isShow: true,
        sentPage: {
          page: 1, //分页累加
        }, //接口入参
        totalNum: 0, //总数据条数
        allLoaded: false, //分页数据是否已经加载完毕
        showMarks: true,
      }
    },
    components: {
      Loadmore,
      // 'all-news': allNews,
      // 'system-news': systemNews,
    },
    methods: {
      goBack() {
        if (this.$route.query.type == 'home') {
          this.$router.push({
            path: '/home'
          })
        } else {

          this.$router.push({
            path: '/my'
          })
        }
      },
      handsel() {
        this.showMarks = true
      },
      // changeSwip(para,index) {
      // 	this.isShow = para;
      // 	$(".nav div a").removeClass("active");
      // 	$(".nav div").eq(index).find("a").addClass("active");
      // },
      //获取消息列表
      getNewsList(i, params, click) {
        $('.head div').eq(i).addClass('active').siblings().removeClass();
        //每点击一次初始化
        if (click) {
          this.list = [];
          this.sentPage.page = 1;
          this.allLoaded = false;
        }
        this.userid = localStorage.getItem("loginMobile");
        if (i == 0) {
          this.type = 'all';
          this.$api.post(this.$api.baseURLSchool, "selecttype_view/message/0?userid=" + this.userid, params, r => {
            // console.log(r);
            this.totalNum = r.data.records;
            if (this.sentPage.page == 1) {
              this.list = r.data.rows;
            } else {
              this.list = this.list.concat(r.data.rows);
            }
            if (r.data.rows.length == 0 && this.sentPage.page > 1) {
              this.$utils._toast("暂无更多数据");
            }
            if (this.totalNum == this.list.length) {
              this.allLoaded = true;
            }

          }, err => {
            console.log(err);
          })
        }
        if (i == 1) {
          this.type = 'window';
          this.$api.post(this.$api.baseURLSchool, "selecttype_view/message/0?userid=" + this.userid + "&type=window",
            params, r => {
              console.log(r);
              this.totalNum = r.data.records;
              if (this.sentPage.page == 1) {
                this.list = r.data.rows;
              } else {
                this.list = this.list.concat(r.data.rows);
              }
              if (r.data.rows.length == 0 && this.sentPage.page > 1) {
                this.$utils._toast("暂无更多数据");
              }
            }, err => {
              console.log(err);
            })
        }
      },
      //上拉加载下一页
      loadBottom() {
        (this.sentPage.page) ++;
        if (this.type == 'all') {
          setTimeout(() => {
            this.getNewsList(0, this.sentPage);
          }, 20);
        } else if (this.type == "window") {
          setTimeout(() => {
            this.getNewsList(1, this.sentPage);
          }, 20);
        }
        if (this.totalNum == this.list.length) {
          this.allLoaded = true;
        }
        this.$refs.loadmore.onBottomLoaded();
      },
      // 全部标记已读
      hasRead() {
        // read  是否读过  true 读过 false 未读
        // console.log(this.list);
        this.list.forEach((val, index) => {
          const obj = {
            id: val.id,
            read: true
          }
          this.$api.post(this.$api.baseURLSchool, "updatedata/message/edit", obj, r => {
            // console.log(r);
            if (this.type == 'all') {
              this.getNewsList(0, this.sentPage, "click");
            } else {
              this.getNewsList(1, this.sentPage, "click");
            }
          }, err => {
            console.log(err);
          })
        });
      }
    },
    created() {
      this.getNewsList(0, this.sentPage);
    }
  }

</script>
<style lang="scss" scoped>
  .mc {
    padding: 40px 0;
    margin: auto;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);

    img {
      display: block;
      margin: 0 auto;
    }

    p {
      padding-top: 10px;
      text-align: center;
    }
  }

  .list {
    width: 100%;
    margin-top: 0.22rem;
  }

  .list>div {
    width: 2.21rem;
    height: 82px;
    background: url('../../image/coupon1.png') no-repeat center;
    background-size: 100%;
    margin: auto;
    position: relative;
    display: flex;
    color: #fff;
  }

  .left {
    width: 64%;
    margin-top: 0.28rem;
    padding-left: 0.32rem;
  }

  .right {
    width: 34%;
    text-align: center;
    line-height: 80px;
    font-size: 11px;
  }

  .price {
    font-size: 19px;
  }

  .text {
    font-size: 11px;
    color: rgba(240, 240, 240, 0.8);
    padding-left: 4px;
  }

  .bottom {
    width: 3.47rem;
    height: 1.32rem;
    background: url('../../image/coupon2.png') no-repeat center;
    background-size: 100%;
    margin: auto;
    margin-bottom: 0.25rem;
    padding-left: 0.2rem;
    padding-top: 0.25rem;

  }

  .bottom div {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.45)
  }


  .marks {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    background: rgba(0, 0, 0, .5);

    div.allTime {
      display: flex;
      flex-direction: column;
      position: fixed;
      left: 50%;
      top: 40%;
      transform: translate(-50%, -50%);
      width: 80%;
      height: 2.08rem;
      /* background:#fff; */
      background: url('../../image/coupon3.png') no-repeat center;
      background-size: 100%;
      position: relative;

      .top {
        position: absolute;
        top: 14%;
        left: 50%;
        transform: translateX(-50%);
        color: #7c998b;
      }

      input {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 44%;
        border: none;
        height: 25px;
        background: transparent;
      }

      &>a {
        line-height: 30px;
        text-align: center;
        color: #fff;
        border-radius: 20px;
        position: absolute;
        bottom: 14px;
        left: 50%;
        transform: translateX(-50%);
      }

      h3 {
        padding: 10px 0;
        margin-left: 10px;
      }

    }
  }

</style>
